<template>
  <a-space style="width: 100%" direction="vertical">
    <a-card>
      <!-- 表单部分 -->
      <TransFrom
        v-model:page="params.page"
        v-model:pageSize="params.pageSize"
        @init="getData"
        @finish="getData"
        @reset="getData"
      />
    </a-card>
    <!-- 按钮组 -->
    <a-card class="radio-card">
      <a-radio-group v-model:value="params.status" button-style="solid" size="large">
        <a-radio-button :value="undefined">
          全部
          {{
            Number(truckCount[1]) +
              Number(truckCount[2]) +
              Number(truckCount[5]) +
              Number(truckCount[4]) || 0
          }}
        </a-radio-button>
        <a-radio-button :value="1">待提货 {{ truckCount[1] || 0 }}</a-radio-button>
        <a-radio-button :value="2">进行中 {{ truckCount[2] || 0 }}</a-radio-button>
        <a-radio-button :value="4">已完成 {{ truckCount[4] || 0 }}</a-radio-button>
        <a-radio-button :value="5">已取消 {{ truckCount[5] || 0 }}</a-radio-button>
      </a-radio-group>
    </a-card>
    <a-card>
      <!-- 表格部分 -->
      <TransTable
        :dataSource="dataSource"
        :loading="isLoading"
        :total="total"
        v-model:page="params.page"
        v-model:pageSize="params.pageSize"
        @change="getData"
      />
    </a-card>
  </a-space>
</template>
<script setup>
import TransFrom from './components/TransForm.vue'
import TransTable from './components/TransTable.vue'
// import ModalForm from './components/ModalForm.vue'
import { reactive, ref, watch, provide } from 'vue'
import {
  getTransportTaskManagerCountAPI,
  postTransportTaskManagerPageAPI,
} from '@/services/transportManager.js'
const total = ref(0)
const dataSource = ref([])
const isLoading = ref(false)
const params = reactive({
  page: 1,
  pageSize: 10,
  assignedStatus: '',
  endAgencyId: null,
  id: '',
  licensePlate: '',
  loadingStatus: '',
  planArrivalTime: '',
  startAgencyId: null,
  status: undefined,
})
// 获取状态 - 按钮组
const truckCount = ref({})
const getTransportManagerCount = async () => {
  const res = await getTransportTaskManagerCountAPI()
  // console.log(res)
  truckCount.value = res.data
}
getTransportManagerCount()
// 监听按钮组状态，切换状态后，重新获取数据
watch(
  () => params.status,
  () => {
    // 重置页码
    params.page = 1
    // 重置页码后，重新获取数据
    getData()
  },
)
// 获取数据
const getData = async (payload) => {
  // 合并参数
  Object.assign(params, payload)
  // 表格加载状态
  isLoading.value = true
  // 剔除掉掉后端不需要的参数(intoStorageTime)
  delete params.intoStorageTime
  // 传递参数
  const res = await postTransportTaskManagerPageAPI(params)
  console.log(res)
  // 关闭表格加载状态
  isLoading.value = false
  // 保存列表数据，用于表格展示
  dataSource.value = res.data.items
  // 保存分页总数
  total.value = Number(res.data.counts)
}
getData()
// // 是否打开模态框
// const isOpenModal = ref(false)
// 依赖注入，方便子组件调用
provide('truckTypes', dataSource)
provide('isLoadingTruckTypes', isLoading)
// const editId = ref('')
// const onOpenModal = (id) => {
//   console.log(id)
//   // if (id) {
//   // 打开弹出层
//   isOpenModal.value = true
//   // 保存编辑车型id
//   editId.value = id ? id : undefined
//   // }
// }
</script>
<style scoped lang="scss">
.radio-card {
  margin: 10px 0;
  // 重置卡片样式
  :deep(.ant-card-body) {
    padding: 0;
  }
  // 重置按钮组样式
  :deep(.ant-radio-button-wrapper) {
    width: 135px;
    font-size: 14px;
    text-align: center;
    border-radius: 0;
    border: 0;
    // 隐藏中间分割线
    &::before {
      display: none;
    }
  }
}
</style>
